<template>
  <el-container>
    <el-header>
      <el-button
        type="primary"
        style="margin-top: 10px"
        @click="addTableVisible = true"
      >添加
      </el-button>

    </el-header>

    <el-main>

      <!--操作的下拉框-->
      <el-select
        @change="operationChange"
        clearable
        v-if="selectedTable.length !== 0"
        v-model="operation"
        :placeholder="'已选择' + selectedTable.length + '项'"
        style="margin-bottom: 25px;"
      >

        <el-option value="delete">
          <span style="float: left">删除</span>
          <span style="float: right; color: #8492a6; font-size: 13px">delete</span>
        </el-option>

      </el-select>

      <el-table
        ref="questionTable"
        v-loading="loading"
        highlight-current-row
        :border="true"
        :data="questionBankInfo"
        tooltip-effect="dark"
        style="width: 100%;"
        @selection-change="handleTableSectionChange"
      >

        <el-table-column
          align="center"
          prop="questionBank.bankName"
          label="ID"
        />

        <el-table-column
          align="center"
          prop="singleChoice"
          label="课程标题"
        />

        <el-table-column
          align="center"
          prop="multipleChoice"
          label="课时"
        />

        <el-table-column
          align="center"
          prop="judge"
          label="课程状态"
        />

        <el-table-column
          align="center"
          prop="shortAnswer"
          label="创建时间"
        />

        <el-table-column
          align="center"
          prop="shortAnswer"
          label="更新时间"
        />

        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="openEditUI(scope.row.id)"
            >修改</el-button>
            <el-button
              type="text"
              @click="deleteUser(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!--分页-->
      <el-pagination
        style="margin-top: 25px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNo"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />

      <!--添加题库信息-->
      <el-dialog
        :title="dialogType=='add'?'新增':'编辑'"
        :visible.sync="addTableVisible"
        width="50%"
        @close="$refs['addForm'].resetFields()"
      >

        <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addForm"
          style="width:80% ;margin-left: 10%;"
        >
          <el-form-item
            label="类型"
            label-width="120px"
            prop="catalogueType"
          >
            <el-radio-group
              v-model="addForm.catalogueType"
              style="width:80%"
              @change="(value)=>catalogueTypeChange(value)"
            >
              <el-radio label="1">父目录</el-radio>
              <el-radio label="2">子目录</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            label="上级目录"
            label-width="120px"
            prop="catalogueParent"
          >
            <el-select
              :disabled="addForm.catalogueType=='1'"
              v-model="addForm.catalogueParent"
              placeholder="请选择活动区域"
              style="width:80%"
            >
              <el-option
                label="区域一"
                value="shanghai"
              ></el-option>
              <el-option
                label="区域二"
                value="beijing"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="目录名称"
            label-width="120px"
            prop="catalogueName"
          >
            <el-input
              style="width:100%"
              v-model="addForm.catalogueName"
            />
          </el-form-item>

        </el-form>

        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="addTableVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="addQuestionBank"
          >确 定</el-button>
        </div>
      </el-dialog>

    </el-main>
  </el-container>
</template>

<script>
import questionBank from "@/api/questionBank";
import utils from "@/utils/utils";

export default {
  name: "QuestionBankManage",
  data() {
    return {
      dialogType: "add",
      queryInfo: {
        bankName: "",
        pageNo: 1,
        pageSize: 10,
      },
      // 被选中的表格的信息
      selectedTable: [],
      // 所有题库信息
      questionBankInfo: [],
      // 当前被选中的操作
      operation: "",
      loading: true,
      // 所有的题库条数
      total: 0,
      // 添加题库的对话框
      addTableVisible: false,
      // 添加题库的表单信息
      addForm: {
        catalogueType: "",
        catalogueParent: "",
        catalogueName: "",
      },
      // 添加表单的数据校验规则
      addFormRules: {
        bankName: [
          {
            required: true,
            message: "请输入题库名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getBankInfo();
  },
  methods: {
    catalogueTypeChange(value) {
      console.log(value);
    },
    // 获取所有的题库信息
    getBankInfo() {
      questionBank.getBankHaveQuestionSumByType(this.queryInfo).then((res) => {
        if (res.code === 20000) {
          this.questionBankInfo = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        } else {
          this.$notify({
            title: "Tips",
            message: res.message,
            type: "error",
            duration: 2000,
          });
        }
      });
    },
    // 查询内容变化
    contentChange() {
      this.getBankInfo();
    },
    // 操作选项的被触发
    operationChange(val) {
      if (val === "delete") {
        this.$confirm("此操作将永久删除该题库, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let ids = [];
            this.selectedTable.map((item) => {
              ids.push(item.questionBank.bankId);
            });
            // 发起删除请求
            questionBank
              .deleteQuestionBank({ ids: ids.join(",") })
              .then((resp) => {
                if (resp.code === 20000) {
                  this.$notify({
                    title: "Tips",
                    message: resp.message,
                    type: "success",
                    duration: 2000,
                  });
                  this.getBankInfo();
                } else {
                  this.$notify({
                    title: "Tips",
                    message: resp.message,
                    type: "error",
                    duration: 2000,
                  });
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    // 表格部分行被选中
    handleTableSectionChange(row) {
      this.selectedTable = row;
    },
    // 分页插件的大小改变
    handleSizeChange(val) {
      this.queryInfo.pageSize = val;
      this.getBankInfo();
    },
    // 分页插件的页数
    handleCurrentChange(val) {
      this.queryInfo.pageNo = val;
      this.getBankInfo();
    },
    // 添加题库
    addQuestionBank() {
      utils.validFormAndInvoke(
        this.$refs["addForm"],
        () => {
          questionBank.addQuestionBank(this.addForm).then((resp) => {
            if (resp.code === 20000) {
              this.getBankInfo();
              this.$notify({
                title: "Tips",
                message: resp.message,
                type: "success",
                duration: 2000,
              });
            } else {
              this.$notify({
                title: "Tips",
                message: resp.message,
                type: "error",
                duration: 2000,
              });
            }
            this.addTableVisible = false;
          });
        },
        "请检查您所填写的信息是否有误"
      );
    },
  },
};
</script>

<style scoped lang="scss">
@import "../../assets/css/teacher/questionBankManage";
</style>
